
<template>
	<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					<input id="test" class="mui-input-numbox" type="number" value="1"  @change="passgoodsNum" ref="goodsNum">
					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				</div>
</template>
<style scoped>
		/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none; 
    margin: 0; 
}
/* 火狐 */
/*去除增减按钮*/
input.mui-input-numbox{
    -moz-appearance:textfield;
}

</style>
<script>
//导入 mui.min.js不起作用	
	import  mui from'../../lib/mui-master/dist/js/mui.js'
	export default{
		
	 props:['max'],
	 methods:{
	 	// 当input的输入框改变的时候，就把input的value值传给父组件goodsInfo
	 	passgoodsNum(){
	 		this.$emit('func',parseInt(this.$refs.goodsNum.value));
	 	},
	 	
	 },
	  mounted:function(){
	  	//初始化numbox
	 	mui('.mui-numbox').numbox();
	 	//控制输入框的数量要小于库存
	 	//1.父组件给子组件传值，获取库存
	 	//2.改组件，查文档

	  	// console.log('库存:'+this.max); //undefined
	  	//undefined是因为获取的库存是异步请求回来的，但是总有一刻会变成数字
	  	//我们要监听这个max，一旦发生改变,由undefined变成数字，就设置numbox的最大值
	  	//mui的选择器直接给了一串字符串，mui('.mui-numbox')而不是mui('mui-numbox')
	 },
	 watch:{
	 	'max':function(newVaule,oldValue){
	 		mui('.mui-numbox').numbox().setOption('max',newVaule);
	 	}
	 }
	 
	}
</script>